<template>
    <div class="app-container">
        <el-row :gutter="15">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="130px">
                <el-col :span="18">
                    <el-form-item label="仓库名称" prop="storeName">
                        <el-input v-model="formData.storeName" placeholder="请输入仓库名称标识" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="所属公司" prop="companyName">
                        <el-input v-model="formData.companyName" placeholder="请输入仓库所属公司" maxlength="20">
                            <el-button slot="append" icon="el-icon-search" @click="queryCompany"></el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="所在城市" prop="storeCity">
                        <el-input v-model="formData.storeCity" placeholder="请输入仓库所在城市" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="具体地址" prop="storeAddress">
                        <el-input v-model="formData.storeAddress" placeholder="请输入仓库具体地址" show-word-limit clearable
                                  :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="房间数" prop="houseNumber">
                        <el-input-number v-model="formData.houseNumber" controls-position="right" :min="1"/>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="仓库容积" prop="storeVolume">
                        <el-input v-model="formData.storeVolume" placeholder="请输入仓库容积" show-word-limit clearable
                                  :style="{width: '100%'}">
                            <template slot="append">立方米</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="使用率%" prop="storeUtilizationRate">
                        <el-input-number v-model="formData.storeUtilizationRate" controls-position="right" :min="0">
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item size="large">
                        <el-button type="primary" @click="submitForm" :loading="loginLoading">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <!--查询公司信息对话框-->
        <el-dialog title="选择公司信息"  :visible.sync="queryCompanyOpen" width="600px" append-to-body>
            <el-table
                    border
                    :row-style="{height:0+'px'}"
                    :cell-style="{padding:0+'px'}"
                    :data="companyList"
                    default-expand-all>
                <el-table-column prop="name" label="公司名" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="idCode" label="注册码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="type" label="公司类型"></el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="checkCompany(scope.row)"
                        >选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                    v-show="companyTotal>0"
                    :total="companyTotal"
                    :page.sync="queryCompanyParams.pageNum"
                    :limit.sync="queryCompanyParams.pageSize"
                    @pagination="getCompanyList"
            />
            <div slot="footer" class="dialog-footer">
                <el-button @click="queryCompanyCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {addStore} from "@/api/store/store.js";
    import {listCompany} from "@/api/organization/company.js";

    export default {
        components: {},
        props: [],
        data() {
            return {
                formData: {
                    storeName: '',
                    companyId: 0,
                    companyName: '',
                    storeAddress: '',
                    storeCity: '',
                    houseNumber: '',
                    storeVolume: '',
                    storeUtilizationRate: ''
                },
                rules: {
                    storeName: [{
                        required: true,
                        message: '请输入仓库名称',
                        trigger: 'blur'
                    }],
                    companyName: [{
                        required: true,
                        message: '请输入查询所属公司信息',
                        trigger: 'blur'
                    }],
                    storeCity: [{
                        required: true,
                        message: '请输入仓库所在城市',
                        trigger: 'blur'
                    }],
                    storeAddress: [{
                        required: true,
                        message: '请输入仓库具体地址',
                        trigger: 'blur'
                    }]
                },
                queryCompanyOpen: false,
                queryCompanyParams: {
                    pageNum: 1,
                    pageSize: 10,
                    name: undefined
                },
                companyList: [],
                companyTotal: 0,
                loginLoading: false
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
        },
        methods: {
            queryCompany(){
                if (this.formData.companyName == null || this.formData.companyName == undefined || this.formData.companyName == '') {
                    this.msgError("公司名称不能为空！");
                    return;
                } else {
                    this.queryCompanyParams.name = this.formData.companyName;
                    this.getCompanyList();
                    this.queryCompanyOpen = true;
                }
            },
            getCompanyList(){
                listCompany(this.queryCompanyParams).then(response => {
                    this.companyList = response.rows;
                    this.companyTotal = response.total;
                });
            },
            checkCompany(row){
                this.formData.companyName = row.name;
                this.formData.companyId = row.companyId;
                this.queryCompanyOpen = false;
            },
            queryCompanyCancel() {
                this.queryCompanyOpen = false;
            },
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (valid) {
                        let app = this;
                        if( app.formData.companyId == 0){
                            app.msgError("公司信息选择不合法，请重新查询选择！");
                            return;
                        }
                        app.loginLoading = true;
                        setTimeout(function () {
                            addStore(app.formData).then(response => {
                                if (response.code === 200) {
                                    app.msgSuccess("新增成功");
                                    app.open = false;
                                    app.getList();
                                } else {
                                    app.msgError(response.msg);
                                }
                            });
                        }, 1000);
                        app.loginLoading = false;
                    }
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            }
        }
    }

</script>
<style>

</style>


